<template>
    <InfoCard v-if="payInfo.item?.video">
        <template #content>
            <div style="text-align: center;" v-if="payInfo.item?.video.characters">
                <div id="dplayer"></div>
            </div>
        </template>
    </InfoCard>
</template>

<script setup lang="ts">
import InfoCard from './InfoCard.vue';
import DPlayer from 'dplayer'
import { onMounted } from "vue";

const props = defineProps({
    payInfo: {
        type: Object,
        default: () => ({})
    }
});



onMounted(() => {
    const dp = new DPlayer({
        container: document.getElementById('dplayer'),
        video: {
            url: props.payInfo.item?.video.characters,
        },
    })
})

</script>